<template>
  <div class="serviceGiftView pd-20">
    <div class="detailView">
      <div class="detail">
        <div class="name">创建时间</div>
        <div class="value">{{commonFunction.timeFormat(item.createTime).hasHMS}}</div>
      </div>
      <div class="detail">
        <div class="name">名称</div>
        <div class="value">{{item.name}}</div>
      </div>
      <div class="detail">
        <div class="name">类型</div>
        <div class="value">{{item.type | type}}</div>
      </div>
      <div class="detail">
        <div class="name">原价</div>
        <div class="value">{{item.originalPrice}}元</div>
      </div>
      <div class="detail">
        <div class="name">现价</div>
        <div class="value">{{item.price}}元</div>
      </div>
      <div class="detail">
        <div class="name">有效天数</div>
        <div class="value">{{item.validDate}}天</div>
      </div>
      <div class="detail">
        <div class="name">内容</div>
        <div class="value">{{item.content}}</div>
      </div>
      <div class="detail">
        <div class="name">图片</div>
        <div class="value">
          <img :src="image"
               alt="图片"
               preview="serviceGiftMgt"
               style="width: 100px;height: 100px;margin: 0 10px"
               v-for="(image,index) in item.imageUrls"
               :key="index">
        </div>
      </div>
      <div class="detail">
        <div class="name">URL</div>
        <div class="value">{{item.url}}</div>
      </div>
    </div>
    <div class="operationView">
      <Button type="primary"
              class="operation_btn"
              @click="handleUpdate">修 改</Button>
      <Button type="primary"
              class="operation_btn"
              @click="handleDel">删 除</Button>
      <Button type="primary"
              class="operation_btn"
              @click="goPage">返 回</Button>
    </div>
  </div>
</template>

<script>
  import { servicePackage } from '@/api/codeName'
  export default {
    name: "serviceGiftView",
    data () {
      return {
        item: {}
      }
    },
    mounted () {
      this._getViewById()
    },
    methods: {
      handleUpdate () {
        this.$router.push({ name: 'serviceGiftEdit', query: { id: this.item.id } })
      },
      handleDel () {
        this.$Modal.confirm({
          title: '确认',
          content: '<p>您确认删除该服务包礼品？</p>',
          onOk: () => {
            this.ajax({
              type: this.api.serviceGiftDel.type,
              url: this.api.serviceGiftDel.url,
              isSubmit: true,
              data: {
                id: this.item.id,
              },
              success: (data) => {
                this.$Message.success(data);
                this.$router.back(-1)
              },
              error: (data) => {
                this.$Message.error(data.message);
              }
            })
          },
          onCancel: () => { }
        });
      },
      _getViewById () {
        this.ajax({
          type: this.api.serviceGiftView.type,
          url: this.api.serviceGiftView.url,
          data: {
            id: this.$route.query.id
          },
          success: (data) => {
            this.item = data.object
            if (this.item.imageUrls) {
              this.item.imageUrls = this.item.imageUrls.split(',')
            }
            this.$previewRefresh()
          },
          error: (data) => {
            this.$Message.error(data.message);
          }
        })
      },
      goPage () {
        this.$router.push({ name: 'serviceGiftList' })
      }
    },
    filters: {
      type: (value) => {
        for (let i = 0; i < servicePackage.serviceGiftMgt.type.length; i++) {
          if (value == servicePackage.serviceGiftMgt.type[i].code) {
            return servicePackage.serviceGiftMgt.type[i].name
          }
        }
        return value
      }
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss">
  .serviceGiftView {
  }
</style>
